<template>
  <div class="BusinessManagement">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item><a>主题设置</a></el-breadcrumb-item>
    </el-breadcrumb>
    <main>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息设置" name="basicSet">
          <basic-set />
        </el-tab-pane>
        <el-tab-pane label="报错页面自定义" name="errorSet">
          <div class="error-set">
            <div class="set-top">
              <el-button
                type="primary"
                @click="dialogVisible = true"
                size="small"
                >新增</el-button
              >
              <span>
                <i class="el-icon-warning-outline"></i>
                添加报错设置后，可在页面中展示自定义的报错信息，若不设置则展示系统默认信息
              </span>
            </div>
            <el-table :data="tableData" border>
              <el-table-column
                label="报错类型"
                prop="error_type"
              ></el-table-column>
              <el-table-column
                label="报错主标题"
                prop="main_title"
              ></el-table-column>
              <el-table-column
                label="报错描述"
                prop="describe"
              ></el-table-column>
              <el-table-column label="更新人" prop="updater">
                <template slot-scope="scope">
                  <show-person :personInfo="scope.row.updater" />
                </template>
              </el-table-column>
              <el-table-column
                label="更新时间"
                prop="update_time"
                min-width="164"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="edit(scope.row)"
                    >编辑</el-button
                  >
                  <el-button type="text" @click="del(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </main>
    <el-dialog
      :title="`${ifAdd ? '新增' : '编辑'}报错页面`"
      :visible.sync="dialogVisible"
      width="50%"
      @close="handleClose"
      custom-class="business-management-dialog"
    >
      <el-form :model="formModel" label-width="100px" ref="dialogForm">
        <el-form-item
          label="报错类型"
          prop="error_type"
          required
          :rules="[{ required: true, message: '请选择报错类型' }]"
        >
          <el-select v-model="formModel.error_type" placeholder="请选择">
            <el-option
              v-for="item in error_typeOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="报错主标题"
          prop="main_title"
          required
          :rules="[{ required: true, message: '请填写报错主标题' }]"
        >
          <el-input
            v-model="formModel.main_title"
            placeholder="请输入名称"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="报错描述" prop="describe">
          <el-input
            v-model="formModel.describe"
            placeholder="请输入描述内容"
            maxlength="20"
            show-word-limit
            type="textarea"
            resize="none"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="dialogSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BasicSet from "@/components/systemtools/BasicSet.vue";
import ShowPerson from "@/components/public/showPerson.vue";
import { addErrorPage, deleteErrorPage, getErrorPageInfo, updateErrorPage } from "@/http/api";
import dayjs from "dayjs";
export default {
  components: { BasicSet, ShowPerson },
  name: "BusinessManagement",
  data() {
    return {
      activeName: "basicSet",
      dialogVisible: false,
      tableData: [],
      formModel: {
        error_type: "",
        main_title: "",
        describe: "",
      },
      error_typeOptions: ["403", "404"],
      ifAdd: true,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    edit(row) {
      this.ifAdd = false;
      this.formModel = { ...row };
      this.dialogVisible = true;
    },
    del(row) {
      this.$alert(`确认删除？`, {
        confirmButtonText: "确定",
        showCancelButton: true,
        type: "warning",
        callback: async(action) => {
          if (action === "confirm") {
            let res = await deleteErrorPage(row.error_type)
            if(res.code === 20021) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getList()
            }
          }
        },
      });
    },
    handleClose() {
      this.formModel = {
        error_type: "",
        main_title: "",
        describe: "",
      };
      this.$nextTick(() => {
        this.$refs.dialogForm.clearValidate();
      });
      this.dialogVisible = false;
      this.ifAdd = true;
    },
    dialogSubmit() {
      this.$refs.dialogForm.validate(async (res) => {
        if (res) {
          let res = {};
          this.formModel.update_time = undefined;
          if (this.ifAdd) {
            res = await addErrorPage(this.formModel);
          } else {
            res = await updateErrorPage(this.formModel);
          }
          if (res.code === 20011) {
            this.$message.success("添加成功");
            this.handleClose();
            this.getList();
          } else if (res.code === 20031) {
            this.$message.success("修改成功");
            this.handleClose();
            this.getList();
          } else {
            this.$message.error(res.msg);
          }
        }
      });
    },
    async getList() {
      let res = await getErrorPageInfo("all");
      if (res.code === 20041) {
        this.tableData = res.data;
        this.tableData.forEach((item) => {
          item.update_time = dayjs(item.update_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.BusinessManagement {
  main {
    background: #fff;
    padding: 10px 20px;
    :deep(.el-tabs__content) {
      height: calc(100vh - 250px);
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 5px;
      }
      &::-webkit-scrollbar-track {
        border-radius: 2px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background: #d9d9d9;
      }
    }
    .error-set {
      .set-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        & > span {
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
<style lang="less">
.business-management-dialog {
  border-radius: 8px;
  .el-dialog__header {
    background-color: #4c78fc;
    padding: 16px 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    .el-dialog__title,
    .el-dialog__close {
      color: #fff;
      font-size: 16px;
    }
  }
  .el-form-item__label {
    font-weight: 600;
  }
  .el-textarea .el-input__count {
    line-height: 16px;
  }
}
</style>
